ºÚÁÏÃÅ

T4 - Formatting Content

Using the WYSYWIG - What You See Is What You Get - otherwise known as the formatter.

HEADLINES

H1 hedgeline used as a first-level headline 

GUIDANCE Use on page as overarching headline

SELECT Format > Formats > Headline > h1

H2 hedgeline used as a second-level headline 

GUIDANCE Use on lede story, overview or announcement

SELECT Format > Formats > Headline > h2

H3 hedgeline used as a second-level headline

GUIDANCE Use to organize page content into sections

SELECT Format > Formats > Headline > h3

H4 hedgeline used as a subhead

GUIDANCE Use to organize sections and narrative into segments

SELECT Format > Formats > Headline > h4

H5 hedgeline used as a headline or label

• Cras facilisis sed magna in volutpat.
• Sed rutrum lacus ac laoreet bibendum.
• Lacinia ultricies mi massa elit.

GUIDANCE Use as a headline on sidebars, subsections, and modules

SELECT Format > Formats > Headline > h5

H6 hedgeline used as a headline or label

GUIDANCE Use to organize segments and as headlines for sidebars and supportive content

SELECT Format > Formats > Headline > h6

PARAGRAPHS

GUIDANCE Use to begin a narrative

SELECT Format > Formats > Block > Paragraph

IMPORTANT The list must be wrapped with a div that has a class of "intro-paragraph"

EXAMPLE

<div class="intro-paragraph">
<p>This is an introduction paragraph. Eu odio nibh, nunc et erat sed tellus ullamcorper mollis eu quis ante.</p>
</div>

This is a standard paragraph. Eu odio nibh, nunc et erat sed tellus ullamcorper mollis eu quis ante. Cras facilisis sed magna in volutpat. Proin feugiat aliquam justo maximus consequat. Sed link here ac laoreet bibendum. Donec venenatis, nibh eget lacinia ultricies, mi massa fermentum elit.

SELECT Format > Formats > Block > Paragraph

LISTS

Unordered list

• Eu odio nibh, nunc et erat sed tellus.
• Ullamcorper mollis eu quis ante.
• Cras facilisis sed magna in volutpat.

SELECT Unordered list in the formatter tool bar

Ordered list

1. Eu odio nibh, nunc et erat sed tellus.
2. Ullamcorper mollis eu quis ante.
3. Cras facilisis sed magna in volutpat.

SELECT Ordered list in the formatter tool bar

INFOBOX

GUIDANCE Use to organize related sidebar content

SELECT Format > Formats > infobox. Highlight the content that will be in the infobox before choosing format.

IMPORTANT The infobox must be wrapped with a div that has a class of "infobox"

EXAMPLE

<div class="infobox">
<h4 style="margin-top: 0;">Headline use an h4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</p>
</div>

BLOCKQUOTE

A longer blockquote sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip. Somebody Namehere

SELECT Format > Formats > blockquote for quote

SELECT Format > Formats > cite for citation

A SHORT BLOCKQUOTE FOR IMPACT ET DOLOR SIT AMET, CONSECTETUR ELIT.. Somebody Namehere

SELECT Format > Formats > blockquote for quote

SELECT Format > Formats > cite for citation

NUMBERS

Number - Large

Number - Medium

Number - Small

Number - Display

SELECT Format > Formats > h2 for number

SELECT Format > Formats > h6 for readout

NUMBER LARGE Must be an h1 and wrapped in a div with a class of "number-lg"

NUMBER MEDIUM Must be an h2 and wrapped in a div with a class of "number-md"

NUMBER SMALL Must be an h3 and wrapped in a div with a class of "number-sm"

NUMBER DISPLAY Must be an h1 and wrapped in a div with a class of "number-lg"

EXAMPLE Wrap with div using one of the classes above, use appropriate h1, h2, or h3. Always use h6 for readout.

<div class="number-display">
<h1>010</h1>
<div class="category-light">
<h6>Readout number description</h6>
</div>
</div>

TABLES

Table - Columns and Rows

TABLES Guidance here